<template>
  <!-- 催收执行页-历史信息模块-回款记录 -->
  <section class="component repay-records">
    <!-- 搜索区域 -->
    <data-form :model="searchModel" @onSearch="refreshData" ref="form">
      <template slot="inputs">
        <el-form-item label="回款日期：" prop="entryTime">
          <el-date-picker v-model="searchModel.entryTime" type="daterange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="回款金额：" prop="repayAmount">
          <number-range v-model="searchModel.repayAmount"></number-range>
        </el-form-item>
        <el-form-item label="回款账户：" prop="repaymentAcctname">
          <el-input v-model="searchModel.repaymentAcctname" clearable></el-input>
        </el-form-item>
        <el-form-item label="回款账号：" prop="repaymentAcctno">
          <el-input v-model="searchModel.repaymentAcctno" clearable></el-input>
        </el-form-item>
        <el-form-item label="催收人员：" prop="collectorRealName">
          <el-input v-model="searchModel.collectorRealName" clearable></el-input>
        </el-form-item>
        <el-form-item label="催收部门：" prop="deptName">
          <el-input v-model="searchModel.deptName" clearable></el-input>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区域 -->
    <data-box :data="dataSet" :height="200" :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column prop="caseNumber" label="订单编号" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column label="回款日期" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <span>{{scope.row.entryTime | dateFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="repayAmount" label="回款金额" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="repaymentAcctname" label="回款账户" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="repaymentAcctno" label="回款账号" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="receiveAcctname" label="收款账户" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="receiveAcctno" label="收款账号" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="collectorRealName" label="催收人员" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="deptName" label="催收部门" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="confirmState" label="回款状态" :formatter="(row) => $filter.dictConvert(row.confirmState,'RepaymentConfirmState')" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="remark" label="备注" :min-width="$helper.getColumnWidth(10)">
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop } from "vue-property-decorator";
import { namespace } from "vuex-class";
import { CaseRepaymentService } from "~/services/domain-service/case-repayment.service";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import NumberRange from "~/components/common/number-range.vue";
import { MENU_CHANNEL } from "~/config/enum.config";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    NumberRange
  }
})
export default class RepayRecords extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseRepaymentService)
  private caseRepaymentService: CaseRepaymentService;
  @CollectionExecutionModule.State private otherData;
  @CollectionExecutionModule.State private menuChannel;
  @CollectionExecutionModule.State private caseNo;
  @CollectionExecutionModule.State private caseId;

  private searchModel: any = {
    entryTime: [],
    repayAmount: { min: "", max: "" },
    repaymentAcctname: '',
    repaymentAcctno: '',
    collectorRealName: '',
    deptName: '',
  };
  private dataSet: any[] = [];

  //获取还款记录
  private refreshData() {
    if (this.menuChannel === MENU_CHANNEL.Outsource) {
      this.searchModel.name = this.otherData;
    }
    this.searchModel.caseNumber = this.caseNo;
    this.caseRepaymentService
      .selectCaseRepayment(this.searchModel, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private activated() {
    this.refreshData();
  }
}
</script>

<style lang="less">
</style>
